<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:28
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:14:05
 * @FilePath: \i-hos-app\shared\emr\src\components\common\ContexMenu.vue
 * @Description: 右键菜单弹层组件
-->
<template>
  <ul class="contexMenu">
    <li v-for="item in newmemuList" :data-edit="item.edit" @click="handMenuList(item)">
      <div class="text" v-if="item.text" :data-edit="item.edit">
        <svg class="emr-icon" aria-hidden>
          <use :xlink:href="'#icon-' + item.edit"></use>
        </svg>
        <span>{{ item.text }}</span>
        <span style="padding-left: 40px" v-if="item.hint">{{ item.hint }}</span>
      </div>
      <div class="line" v-else></div>
    </li>
  </ul>
</template>

<script setup lang="ts">
  import { reactive, computed } from 'vue'
  // 接受父组件传的参数(判断使用的菜单类型)
  const props = defineProps<{
    type?: string
  }>()
  // 接口约束
  import { IContextMenu } from '../../interface/page'
  // 富文本编辑操作hooks
  import { useEdit } from '../../hooks/useEdit'
  import { useHandleTable } from '../../hooks/useHandleTable'
  let { insertTable, deleteTable, mergeTable, breakCells } = useHandleTable()
  // 所有菜单栏
  let memuList: IContextMenu[] = reactive([
    { text: '全选', edit: 'selectAll', hint: 'Ctr+A', type: '1' },
    { text: '剪切', edit: 'cut', hint: 'Ctr+X', type: '1' },
    { text: '复制', edit: 'copy', hint: 'Ctr+C', type: '1' },
    { text: '粘贴', edit: 'paste', hint: 'Ctr+V', type: '1' },
    { text: '清除格式', edit: 'removeFormat', type: '1' },
    { text: '清除字体', edit: 'clearFont', type: '1' },
    { text: '清除字号', edit: 'clearSize', type: '1' },
    { text: '', edit: '' },
    { text: '上方插一行', edit: 'insertRowBefore', type: '2' },
    { text: '下方插一行', edit: 'insertRowAfter', type: '2' },
    { text: '左侧插一列', edit: 'insertColBefore', type: '2' },
    { text: '右侧插一列', edit: 'insertColAfter', type: '2' },
    { text: '', edit: '', type: '2' },
    { text: '合并单元格', edit: 'mergeCell', type: '2' },
    { text: '取消合并单元格', edit: 'cancelMergeCell', type: '2' },
    { text: '向右合并', edit: 'mergeRight', type: '2' },
    { text: '向下合并', edit: 'mergeDown', type: '2' },
    { text: '', edit: '', type: '2' },
    { text: '删除表格', edit: 'deleteTable', type: '2' },
    { text: '删除行', edit: 'deleteRow', type: '2' },
    { text: '删除列', edit: 'deleteCol', type: '2' },
  ])
  // 计算需要的菜单栏
  const newmemuList = computed((): IContextMenu[] => {
    let menu: IContextMenu[] = []
    let flag = props.type != undefined && !!props.type ? props.type : window.localStorage.contexMenuType
    if (!!flag && flag != undefined) {
      for (let item of memuList) {
        if (item.type == flag) {
          menu.push(item)
        }
      }
      return menu
    } else {
      return memuList
    }
  })
  // 操作菜单栏
  const handMenuList = (flag: IContextMenu): void => {
    let _flag = JSON.parse(JSON.stringify(flag))
    if (_flag.edit == '') return
    // 富文本的形式操作
    if (_flag.type == '1') {
      if (_flag.edit == 'clearFont') {
        _flag.edit = 'fontName'
      } else if (_flag.edit == 'clearSize') {
        _flag.edit = 'fontsize:3'
      }
      useEdit(_flag.edit, '')
    }
    // 表格操作
    if (_flag.type == '2') {
      if (_flag.edit.includes('insert')) {
        insertTable(_flag.edit)
      } else if (_flag.edit.includes('erge')) {
        if (_flag.edit == 'cancelMergeCell') {
          breakCells()
        } else {
          mergeTable(_flag.edit)
        }
      } else if (_flag.edit.includes('delete')) {
        deleteTable(_flag.edit)
      }
    }
  }
</script>

<style scoped lang="scss">
  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .contexMenu {
    padding: 6px 0;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0px 0px 4px #d3d3d3;
    background-color: #fff;
    z-index: 99;
    li {
      .text {
        display: flex;
        align-items: center;
        font-size: var(--theme-font-size);
        color: #555;
        padding: 2px 10px;
        cursor: pointer;
        &:hover {
          color: #409eff;
          background-color: #f5f5f5;
        }
        .emr-icon {
          width: 15px;
          margin-right: 5px;
          max-height: 20px;
        }
      }
      .line {
        width: 100%;
        height: 1px;
        margin: 5px 0;
        background-color: #ccc;
      }
    }
  }
</style>
